@charset "utf-8";
/**
 * Created by kroyo on 2017/12/13.
 * common 
 */

$font-size: 40px;
@function r($px){
    @return $px/$font-size * 1rem;
}

@mixin common($width,$height,$url){
    position: absolute;
    width: r($width);
    height: r($height);
    background: $url no-repeat center;
    background-size: 100%;
}




html,body{
    margin: 0;
    height: 100%;
    overflow: hidden;
}
p{
    margin: 0;          
}
img{
    border:0 none;
    padding: 0;
    margin: 0;
    outline-style: none;
}
em{
    font-style: normal;
}
input,a,button {
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  -webkit-appearance: none;
}
a {
  text-decoration: none;
}

/**引入iconfont**/
@font-face {
  font-family: 'Revuen';  
  src: url('../data/Revuen.ttf');
}




.textcenter{
    left: 0;
    right: 0;
    margin: 0 auto;
}



.swiper-wrapper{
    position: relative;
    height: 100%;
}
.swiper-container{
    height: 100%;
}
.swiper-slide{
    width: 100%;
    height: 100%;
    overflow: hidden;
    transition: 800ms;
}
//音乐播放器
.music-wrapper{
    position: fixed;
    top: r(36px);
    right: r(58px);
    width: r(100px);
    height: r(90px);
    background: url(../img/music-bg.png) no-repeat center;
    background-size: 100%;
    z-index: 9;
    opacity: 0;
    .icon-music{
        position: absolute;
        top: r(26px);
        right: r(28px);
        width: r(19px);
        height: r(30px);
        background: url(../img/icon-music.png) no-repeat;
        background-size: 100%;
        transform: rotate(0);
//      animation: music 6s infinite linear;
    }
    @keyframes music{
        0%{
            transform: rotate(0);
        }
        100%{
            transform: rotate(-360deg);
        }
    }
    audio{
        display: none;
    }
}


//loading
.loading-wrapper{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url(../img/loadingbg.png) no-repeat center;
    background-size: cover;
    z-index: 10;
    opacity: 0;
    .loading-view{
        width: auto;
        height: auto;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translateX(-50%) translateY(-50%);
    }
    .loading-icon{
        width: r(150px);
        height: r(140px);
        background: url(../img/loading.png) no-repeat center;
        background-size: 100%;
        margin: 0 auto;
        padding-left: r(10px);
    }
    .loading-percent{
        font-size: r(35px);
        color: #ffd301;
        font-family: 'Revuen';
        text-align: center;
        margin-top: r(20px);
    }
}




//
.share-view{
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,.8);
    z-index: 99;
    .share-icon{
        position: absolute;
        top: r(10px);
        right: r(50px);
        width: r(467px);
        height: r(168px);
        background: url(../img/share.png) no-repeat center;
        background-size: 100%;
    }
}







/**公共部分**/
.page{
    position: relative;
    background: url(../img/bg.png) no-repeat;
    background-size: cover;
    opacity: 0;
    div{
        position: absolute;
    }
    .page-header{
        top: 0;
        left: 0;
        width: r(120px);
        height: r(109px);
        overflow: hidden;
    }
    //top
    .page-title{
        top: r(86px);
    }
    .page-bottom{
        width: 100%;
        bottom: 0;
    }
    .next{
        width: r(61px);
        height: r(34px);
        bottom: r(40px);
        left: 0;
        right: 0;
        margin: 0 auto;
        background: url(../img/icon-next.png) no-repeat;
        background-size: 100%;
        transform: translateY(0);
        animation: moveNext .5s infinite alternate-reverse;
    }
    @keyframes moveNext{
        from{transform: translateY(0);}
        to{transform: translateY(5px);}
    }
    .page-wrapper{
        position: relative;
        width: 100%;
        height: 100%;
        min-height: r(1160px);
        overflow: hidden;
    }
}



/**第一部分**/
.page-first{
    .page-header{
        background: url(../img/firstpage/firt-title.png) no-repeat center;
        background-size: 100%;
    }
    //text-top
    .page-title{
        width: r(626px);
        height: r(240px);
        background: url(../img/firstpage/first-text-top.png) no-repeat center;
        background-size: 100%;
    }
    //icon-center
    .page-center{
        top: r(335px);
        width: r(533px);
        height: r(376px);
        .table{
            width: 100%;
            height: 100%;
            background: url(../img/firstpage/first2.png) no-repeat center;
            background-size: 100%;
        }
        .line{
            left: r(100px);
            bottom: r(26px);
            width: r(363px);
            height: r(241px);
            overflow: hidden;
            &>div{
                width: r(363px);
                height: 100%;
                background: url(../img/firstpage/line.png) no-repeat center;
                background-size: 100%;
            }
        }
        .center-right{
            right: r(-70px);
            top: r(210px);
             @include common(104px,101px,url(../img/firstpage/icon-place.png));
        }
        .center-left{
            top: r(140px);
            left: r(-78px);
            width: r(66px);
            height: r(72px);
            background: url(../img/firstpage/first1.png) no-repeat center;
            background-size: 100%;
        }
    }
    .page-bottom{
        bottom: 0;
        width: 100%;
        .page-icon-center{
            left: r(286px);
            bottom: r(330px);
            @include common(88px,78px,url(../img/firstpage/first3.png));
        }
        //text-bottom
        .page-text{
            bottom: r(140px);
            width:r(650px);
            height: r(266px);
            background: url(../img/firstpage/first-text-bottom.png) no-repeat center;
            background-size: 100%;
        }
        //bottom-left
        .bottom-left{
            left: r(72px);
            bottom: 0;
            width: r(180px);
            height: r(40px);
            background: url(../img/firstpage/first4.png) no-repeat center;
            background-size: 100%;
        }
        .bottom-right{
            bottom:r(15px);
            right: 0;
            width: r(145px);
            height: r(69px);
            background: url(../img/firstpage/first5.png) no-repeat center;
            background-size: 100%;
        }
    }
    .page-wrapper{
        min-height: r(1120px);
    }
//  @media only screen and (min-height:480px) and (max-height:540px) {
//      .page-text{
//          bottom: r(90px);
//      }
//      .page-icon-center{
//          bottom: r(260px);
//      }
//  }
//  @media only screen and (max-height:480px) {
//      .page-center{
//          top: r(300px);
//      }
//      .page-text{
//          bottom: r(40px);
//      }
//      .page-icon-center{
//          display: none;
//      }
//      .bottom-right{
//          bottom: r(-20px);
//      }
//  }
}





/**第二部分**/
.page-second{
    .page-header{
        background: url(../img/secondpage/second-header.png) no-repeat center;
        background-size: 100%;
    }
    .page-title{
        width: r(619px);
        height: r(301px);
        background: url(../img/secondpage/second-title.png) no-repeat center;
        background-size: 100%;
    }
    .page-center{
        top: r(380px);
        width: 100%;
        height: r(364px);
        .center-table{
            width: r(460px);
            height: r(364px);
            left: 0;
            right: 0;
            margin: 0 auto;
            background: url(../img/secondpage/second-table.png) no-repeat center;
            background-size: 100%;
        }
        .line1{
            left: r(105px);
            bottom: r(64px);
            width: r(63px);
            height: r(73px);
            &>div{
                bottom: 0;
                width: 100%;
                height: 100%;
                background: url(../img/secondpage/second1.png) no-repeat center;
                background-size: 100%;
            }
        }
        .line2{
            left: r(224px);
            bottom: r(64px);
            width: r(70px);
            height: r(175px);
            &>div{
                bottom: 0;
                width: 100%;
                height: 100%;
                background: url(../img/secondpage/second2.png) no-repeat center;
                background-size: 100%;
            }
        }
        .line3{
            right: r(44px);
            bottom: r(64px);
            width: r(83px);
            height: r(280px);
            &>div{
                bottom: 0;
                width: 100%;
                height: 100%;
                background: url(../img/secondpage/second3.png) no-repeat center;
                background-size: 100%;
            }
        }
        .center-statue{
            top: r(130px);
            right: 0;
            width: r(91px);
            height: r(97px);
            background: url(../img/secondpage/second-statue.png) no-repeat center;
            background-size: 100%;
        }
    }
    .page-bottom{
        .bottom-bg{
            right: 0;
            bottom: r(20px);
            width: r(432px);
            height: r(413px);
            background: url(../img/secondpage/second-bottom.png) no-repeat center;
            background-size: 100%;
        }
        .bottom-text{
            left: r(78px);
            bottom: r(258px);
            width: r(317px);
            height: r(120px);
            background: url(../img/secondpage/second-text.png) no-repeat center;
            background-size: 100%;
        }
        .bottom-plane{
            left: r(80px);
            bottom: r(45px);
            width: r(148px);
            height: r(127px);
            background: url(../img/secondpage/second-plane.png) no-repeat center;
            background-size: 100%;
        }
    }
//  @media only screen and (min-height:480px) and (max-height:540px) {
//      .page-center{
//          top: r(350px);
//      }
//      .page-bottom{
//          bottom: r(-50px);
//      }
//  }
//  @media only screen and (max-height:480px) {
//      .page-center{
//          top: r(350px);
//      }
//      .page-bottom{
//          bottom: r(-120px);
//      }
//  }
}





/**第三部分**/
.page-third{
    .page-header{
        background: url(../img/thirdpage/third-header.png) no-repeat center;
        background-size: 100%;
    }
    .page-title{
        width: r(630px);
        height: r(297px);
        background: url(../img/thirdpage/third-title.png) no-repeat center;
        background-size: 100%;
    }
    .page-center{
        width: 100%;
        height: r(300px);
        top: r(414px);
        .center-table{
            width: r(290px);
            height: r(310px);
            background: url(../img/thirdpage/third-center-bg.png) no-repeat center;
            background-size: 100%;
        }
        .center-t{
            bottom: 0;
            width: 100%;
            height: 100%;
            overflow: hidden;
            &>div{
                bottom: 0;
                width: 100%;
                height: r(310px);
                background: url(../img/thirdpage/third-center.png) no-repeat center;
                background-size: 100%;
            }
        }
        .text1{
            top: r(30px);
            width: r(150px);
            height: r(20px);
            background: url(../img/thirdpage/text1.png) no-repeat center;
            background-size: 100%;
        }
        .text2{
            top: r(80px);
            width: r(129px);
            height: r(20px);
            background: url(../img/thirdpage/text2.png) no-repeat center;
            background-size: 100%;
        }
        .text3{
            top: r(186px);
            width: r(129px);
            height: r(20px);
            background: url(../img/thirdpage/text3.png) no-repeat center;
            background-size: 100%;
        }
        .center-left{
            left: 0;
            top: r(120px);
            width: r(148px);
            height: r(127px);
            background: url(../img/thirdpage/third-plane.png) no-repeat center;
            background-size: 100%;
        }
        .center-right{
            right: 0;
            top: r(90px);
            width: r(91px);
            height: r(97px);
            background: url(../img/thirdpage/third-statue.png) no-repeat center;
            background-size: 100%;
        }
    }
    .page-bottom{
        .bottom-bg{
            bottom: 0;
            width: r(527px);
            height: r(252px);
            background: url(../img/thirdpage/third-bottom.png) no-repeat center;
            background-size: 100%;
        }
        .bottom-right{
            right: 0;
            bottom: 0;
            width: r(123px);
            height: r(114px);
            background: url(../img/thirdpage/third3.png) no-repeat center;
            background-size: 100%;
        }
        .bottom-text{
            bottom: r(300px);
            width: r(441px);
            height: r(120px);
            background: url(../img/thirdpage/third-text.png) no-repeat center;
            background-size: 100%;
        }
    }
//  @media only screen and (min-height:480px) and (max-height:540px) {
//      .page-center{
//          top: r(380px);
//      }
//  }
//  @media only screen and (max-height:480px) {
//      .page-center{
//          top: r(360px);
//      }
//      .page-bottom{
//          bottom: r(-80px);
//      }
//  }
}




/**第四部分**/
.page-four{
    .page-header{
        background: url(../img/fourthpage/fourth-header.png) no-repeat center;
        background-size: 100%;
    }
    .page-title{
        width: r(593px);
        height: r(252px);
        background: url(../img/fourthpage/fourth-title.png) no-repeat center;
        background-size: 100%;
    }
    .page-center{
        top: r(346px);
        width: 100%;
        height: r(300px);
        z-index: 1;
        .center-table{
            top: 0;
            width: r(600px);
            height: r(300px);
//          background: url(../img/fourthpage/fourth-center.png) no-repeat center;
            background-size: 100%;
            &>div{
                overflow: visible !important;
            }
        }
        .text1{
            top: r(24px);
            left: r(-135px);
            width: r(179px);
            height: r(32px);
            background: url(../img/fourthpage/text1.png) no-repeat center;
            background-size: 100%;
        }
        .text2{
            top: r(100px);
            left: r(-132px);
            width: r(136px);
            height: r(19px);
            background: url(../img/fourthpage/text2.png) no-repeat center;
            background-size: 100%;
        }
        .text3{
            top: r(180px);
            left: r(-135px);
            width: r(140px);
            height: r(21px);
            background: url(../img/fourthpage/text3.png) no-repeat center;
            background-size: 100%;
        }
        .text4{
            top: r(270px);
            right: r(-72px);
            width: r(169px);
            height: r(27px);
            background: url(../img/fourthpage/text4.png) no-repeat center;
            background-size: 100%;
        }
        .text5{
            top: r(45px);
            right: r(-136px);
            width: r(155px);
            height: r(30px);
            background: url(../img/fourthpage/text5.png) no-repeat center;
            background-size: 100%;
        }
        .center-statue{
            top: r(154px);
            right: 0;
            width: r(91px);
            height: r(97px);
            background: url(../img/fourthpage/fourth-statue.png) no-repeat center;
            background-size: 100%;
        }
    }
    .page-bottom{
        width: r(635px);
        height: r(502px);
        background: url(../img/fourthpage/fourth-bottom.png) no-repeat center;
        background-size: 100%;
    }
//  @media only screen and (min-height:480px) and (max-height:540px) {
//      .page-center{
//          top: r(320px);
//      }
//      .page-bottom{
//          bottom: r(-45px);
//      }
//  }
//  @media only screen and (max-height:480px) {
//      .page-title{
//          top: r(60px);
//      }
//      .page-center{
//          top: r(290px);
//      }
//      .page-bottom{
//          bottom: r(-110px);
//      }
//  }
}





/**第五部分**/
.page-five{
    .page-header{
        background: url(../img/fifthpage/fifth-header.png) no-repeat center;
        background-size: 100%;
    }
    .page-title{
        width: r(593px);
        height: r(292px);
        background: url(../img/fifthpage/fifth-title.png) no-repeat center;
        background-size: 100%;
    }
    .page-center{
        top: r(320px);
        width: 100%;
        height: r(460px);
        .center-table{
            width: r(431px);
            height: r(378px);
            background: url(../img/fifthpage/fifth-center.png) no-repeat center;
            background-size: 100%;
        }
        .text1{
            top: r(122px);
            right: r(-64px);
            width: r(192px);
            height: r(60px);
            background: url(../img/fifthpage/text1.png) no-repeat center;
            background-size: 100%;
            .t1{
                top: r(16px);
                left: r(16px);
                width: r(30px);
                height: r(29px);
                background: url(../img/fifthpage/t1.png) no-repeat center;
                background-size: 100%;
                animation: opactityfade 1s infinite;
            }
        }
        .text2{
            top: r(220px);
            right: r(-100px);
            width: r(191px);
            height: r(61px);
            background: url(../img/fifthpage/text2.png) no-repeat center;
            background-size: 100%;
            .t2{
                top: r(16px);
                left: r(16px);
                width: r(30px);
                height: r(29px);
                background: url(../img/fifthpage/t2.png) no-repeat center;
                background-size: 100%;
                animation: opactityfade 1s infinite;
            }
        }
        .text3{
            right: r(-30px);
            bottom: r(20px);
            width: r(193px);
            height: r(71px);
            background: url(../img/fifthpage/text3.png) no-repeat center;
            background-size: 100%;
            .t3{
                top: r(20px);
                left: r(16px);
                width: r(30px);
                height: r(29px);
                background: url(../img/fifthpage/t3.png) no-repeat center;
                background-size: 100%;
                animation: opactityfade 1s infinite;
            }
        }
        @keyframes opactityfade{
            0%{
                opacity: 0.1;
                transform: scale(0.2);
            }
            100%{
                opacity: 1;
                transform: scale(1);
            }
        }
        .center-plane{
            top: r(270px);
            left: 0;
            width: r(125px);
            height: r(127px);
            background: url(../img/fifthpage/fifth-plane.png) no-repeat center;
            background-size: 100%;
        }
        .center-text{
            top: r(434px);
            width: r(423px);
            height: r(120px);
            background: url(../img/fifthpage/fifth-text.png) no-repeat center;
            background-size: 100%;
        }
    }
    .page-bottom{
        width: r(598px);
        height: r(375px);
        background: url(../img/fifthpage/fifth-bottom.png) no-repeat center;
        background-size: 100%;
    }
//  @media only screen and (min-height:480px) and (max-height:540px) {
//      .page-title{
//          top: r(60px);
//      }
//      .page-center{
//          top: r(300px);
//          .center-text{
//              top: r(420px);
//          }
//      }
//      .page-bottom{
//          bottom: r(-25px);
//      }
//  }
//  @media only screen and (max-height:480px) {
//      .page-title{
//          top: r(40px);
//      }
//      .page-center{
//          top: r(280px);
//          .center-text{
//              top: r(390px);
//          }
//      }
//      .page-bottom{
//          bottom: r(-60px);
//      }
//  }
}




/**第六部分**/
.page-six{
    .page-header{
        background: url(../img/sixthpage/sixth-header.png) no-repeat center;
        background-size: 100%;
    }
    .page-title{
        width: r(593px);
        height: r(292px);
        background: url(../img/sixthpage/sixth-title.png) no-repeat center;
        background-size: 100%;
    } 
    .page-center{
        top: r(358px);
        width: 100%;
        height: r(400px);
        .center-table{
            top: 0;
            width: r(345px);
            height: r(279px);
            background: url(../img/sixthpage/sixth-center.png) no-repeat center;
            background-size: 100%;
            .text1{
                top: r(115px);
                left: r(136px);
                width: r(81px);
                height: r(50px);
                background: url(../img/sixthpage/text1.png) no-repeat center;
                background-size: 100%;
            }
            .text2{
                top: r(160px);
                left: r(10px);
                width: r(98px);
                height: r(50px);
                background: url(../img/sixthpage/text2.png) no-repeat center;
                background-size: 100%;
            }
            .text3{
                top: r(202px);
                left: r(248px);
                width: r(81px);
                height: r(48px);
                background: url(../img/sixthpage/text3.png) no-repeat center;
                background-size: 100%;
            }
        }
        .center-text{
            top: r(330px);
            width: r(424px);
            height: r(120px);
            background: url(../img/sixthpage/sixth-text.png) no-repeat center;
            background-size: 100%;
        }
        .center-plane{
            top: r(330px);
            left: 0;
            width: r(148px);
            height: r(127px);
            background: url(../img/sixthpage/sixth-plane.png) no-repeat center;
            background-size: 100%;
        }
        .center-statue{
            top: r(140px);
            right: 0;
            width: r(91px);
            height: r(97px);
            background: url(../img/sixthpage/sixth-statue.png) no-repeat center;
            background-size: 100%;
        }
    }
    .page-bottom{
        width: 100%;
        height: r(360px);
        .bottom1{
            width: 100%;
            height: r(361px);
            background: url(../img/sixthpage/sixth-bottom1.png) no-repeat center;
            background-size: 100%;
            z-index: 1;
        }
        .bottom2{
            bottom: 0;
            width: r(470px);
            height: r(237px);
            background: url(../img/sixthpage/sixth-bottom2.png) no-repeat center;
            background-size: 100%;
        }
    } 
//  @media only screen and (min-height:480px) and (max-height:540px) {
//      .page-title{
//          top: r(60px);
//      }
//      .page-center{
//          top: r(300px);
//          .center-text{
//              top: r(320px);
//          }
//      }
//      .page-bottom{
//          bottom: r(-15px);
//      }
//  }
//  @media only screen and (max-height:480px) {
//      .page-title{
//          top: r(60px);
//      }
//      .page-center{
//          top: r(300px);
//          .center-text{
//              top: r(300px);
//          }
//      }
//      .page-bottom{
//          bottom: r(-80px);
//      }
//  }  
} 




/**第七部分**/
.page-seven{
    .page-header{
        background: url(../img/seventhpage/seventh-header.png) no-repeat center;
        background-size: 100%;
    }
    .page-title{
        width: r(579px);
        height: r(259px);
        background: url(../img/seventhpage/seventh-title.png) no-repeat center;
        background-size: 100%;
    }  
    .page-center{
        top: r(406px);
        width: 100%;
        height: r(340px);
        .center-table{
            top: 0;
            width: r(412px);
            height: r(137px);
            background: url(../img/seventhpage/seventh-table-bg.png) no-repeat center;
            background-size: 100%;
            .table{
                left: 0;
                top: 0;
                width: 100%;
                height: r(137px);
                overflow: hidden;
                &>div{
                    left: 0;
                    width: r(412px);
                    height: 100%;
                    background: url(../img/seventhpage/seventh-table.png) no-repeat center;
                    background-size: 100%;
                }
            }
            .text1{
                top: r(42px);
                left: r(30px);
                width: r(139px);
                height: r(47px);
                background: url(../img/seventhpage/table-text1.png) no-repeat center;
                background-size: 100%;
            }
            .text2{
                top: r(42px);
                right: r(78px);
                width: r(71px);
                height: r(47px);
                background: url(../img/seventhpage/table-text2.png) no-repeat center;
                background-size: 100%;
            }
        }
        .center-tabletext{
            top: r(120px);
            width: r(354px);
            height: r(51px);
            background: url(../img/seventhpage/seventh-center1.png) no-repeat center;
            background-size: 100%;
        }
        .center-statue{
            top: r(98px);
            right: 0;
            width: r(91px);
            height: r(97px);
            background: url(../img/seventhpage/seventh-statue.png) no-repeat center;
            background-size: 100%;
        }
        .center-plane{
            top: r(200px);
            left: 0;
            width: r(148px);
            height: r(127px);
            background: url(../img/seventhpage/seventh-plane.png) no-repeat center;
            background-size: 100%;
        }
        .center-text{
            top: r(300px);
            width: r(396px);
            height: r(120px);
            background: url(../img/seventhpage/seventh-text.png) no-repeat center;
            background-size: 100%;
        }
    }
    .page-bottom{
        bottom: r(70px);
        width: 100%;
        height: r(172px);
        background: url(../img/seventhpage/seventh-bottom.png) no-repeat center;
        background-size: 100%;
        .bottom-top{
            bottom: r(42px);
            &>div{
                bottom: 0;
            }
            .es1{
                left: r(18px);
                width: r(70px);
                height: r(90px);
                background: url(../img/seventhpage/1.png) no-repeat center;
                background-size: 100%;
            }
            .es2{
                left: r(122px);
                width: r(79px);
                height: r(92px);
                background: url(../img/seventhpage/2.png) no-repeat center;
                background-size: 100%;
            }
            .es3{
                left: r(260px);
                width: r(120px);
                height: r(72px);
                background: url(../img/seventhpage/3.png) no-repeat center;
                background-size: 100%;
            }
            .es4{
                right: r(246px);
                width: r(78px);
                height: r(127px);
                background: url(../img/seventhpage/4.png) no-repeat center;
                background-size: 100%;
            }
            .es5{
                right: r(164px);
                width: r(41px);
                height: r(80px);
                background: url(../img/seventhpage/5.png) no-repeat center;
                background-size: 100%;
            }
            .es6{
                right: r(15px);
                width: r(109px);
                height: r(138px);
                background: url(../img/seventhpage/6.png) no-repeat center;
                background-size: 100%;
            }
        }
        .bottom-line{
            bottom: 0;
            width: 100%;
            height: r(41px);
            background: url(../img/seventhpage/text-wrapper.png) no-repeat center;
            background-size: 100%;
        }
        .text-wrapper{
            .text{
                width: r(33px);
                height: (33px);
            }
            .text1{
                
            }
        }
    } 
    .page-wrapper{
        min-height: r(1050px);
    }
//  @media only screen and (min-height:480px) and (max-height:540px) {
//      
//  }
//  @media only screen and (max-height:480px) {
//      .page-center{
//          top: r(380px);
//          .center-text{
//              top: r(260px);
//          }
//      }
//      .page-bottom{
//          bottom: r(50px);
//      }
//  }   
}  




/**第八部分**/
.page-eight{
    .page-header{
        background: url(../img/eighthpage/eighth-header.png) no-repeat center;
        background-size: 100%;
    }
    .page-title{
        top: r(130px);
        width: r(645px);
        height: r(480px);
//      background: url(../img/eighthpage/eighth-bg.png) no-repeat center;
        //video
        #video{
        //  display: none;
            position: absolute;
            top: 0;
            width: 100%;
            height: r(360px);
            background-color: #ffffff;
            z-index: 10;
        }
        .video-text{
            top: r(400px);
            width: r(245px);
            height: r(44px);
            background: url(../img/eighthpage/video-text.png) no-repeat center;
            background-size: 100%;
        }
        .playbtn{
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            margin: auto;
            width: r(100px);
            height: r(100px);
            background: url(../img/eighthpage/playbtn.png) no-repeat center;
            background-size: 100%;
            transform: translateY(-50%);
            z-index: 11;
        }
    }  
    .page-center{
        top: r(630px);
        width:100%;
        .center-text{
            top: 0;
            width: r(276px);
            height: r(105px);
            background: url(../img/eighthpage/eighth-center.png) no-repeat center;
            background-size: 100%;
        }
        .center-statue{
            top: r(-130px);
            right: 0;
            width: r(91px);
            height: r(97px);
            background: url(../img/eighthpage/eighth-statue.png) no-repeat center;
            background-size: 100%;
        }
        .center-plane{
            left: 0;
            top: r(32px);
            width: r(140px);
            height: r(127px);
            background: url(../img/eighthpage/eighth-plane.png) no-repeat center;
            background-size: 100%;
        }
        .center-logo{
            top: r(180px);
            width: r(356px);
            height: r(154px);
            background: url(../img/eighthpage/logo.png) no-repeat center;
            background-size: 100%;
        }
        .center-t{
            top: r(-23px);
            right: r(220px);
            width: r(33px);
            height: r(38px);
            background: url(../img/eighthpage/dian.png) no-repeat center;
            background-size: 100%;
            animation: xingxing 1s infinite;
        }
    }
    @keyframes  xingxing{
        0%{
            opacity: 0.1;
            transform: scale(0.4);
        }
        100%{
            opacity: 1;
            transform: scale(1);
        }
    }
    .page-bottom{
        width: 100%;
        height: r(312px);
        background: url(../img/eighthpage/eighth-bottom.png) no-repeat center;
        background-size: 100%;
    }  
    .page-wrapper{
        min-height: r(1120px);
    }
//  @media only screen and (min-height:480px) and (max-height:540px) {
//      .page-center{
//          top: r(620px);
//          .center-logo{
//              top: r(160px);
//          }
//      }
//      .page-bottom{
//          bottom: r(-10px);
//      }
//  }
//  @media only screen and (max-height:480px) {
//      .page-title{
//          top: r(60px);
//      }
//      .page-center{
//          top: r(580px);
//          .center-logo{
//              top: r(140px);
//          }
//      }
//      .page-bottom{
//          bottom: r(-40px);
//      }
//  }  
}     









@media only screen and (min-height:700px){
    .page {
        .page-center{
            top: 50%;
            left: 50%;
            transform: translateX(-50%) translateY(-65%);
        }
        .page-title{
            top: r(184px);
        }
    }
    .page-seven{
        .page-bottom{
            bottom: r(120px);
        }
    }
}